
<template>
  <div class="findTeacher">
    <div class="findTeacher-header">
      <box-border title-button="选择老师" />
    </div>
    <div class="findTeacher-center">
      <el-table
        border
        :data="resulteacherTab"
        style="width: 100%"
      >
        <el-table-column
          v-for="(item,index) in title"
          :key="index"
          align="center"
        > <template slot="header" slot-scope="scope">
            <div v-if="scope.$index == 0" class="line_box">
              <span class="tit3">课程信息</span>
              <div class="line1" />
              <div>
                <div class="tit2">老师</div>
                <br>
                <div class="tit1">日期</div>
              </div>
            </div>
            <div v-else class="line_avaAndDate">
              <img :src="item.Ava" alt="">
              <span class="line_avaAndDate-text">{{ item.date }}</span>
            </div>
          </template>
          <template slot-scope="scope">
            <el-button v-if="scope.row[index] === 1" type="primary" @click="handleBookClass(scope.$index,item)">
              <span>预约</span>
            </el-button>
            <el-button v-else-if="scope.row[index] === 0" type="primary" disabled>
              <span>无法预约</span>
            </el-button>
            <span v-else>{{ scope.row[index] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="findTeacher-footer">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[4, 6]"
        :page-size="limit"
        layout="prev, pager, next, jumper,->,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      limit: 4,
      total: 0,
      timeForm: ['9:25-9:50', '10:25-10:50', '11:25-11:50', '12:25-12:50', '13:25-13:50', '14:25-14:50', '15:25-15:50', '16:30-16:55'],
      teacherTimeTab: [],
      resulteacherTab: [],
      title: [],
      searchTeacherForm: {}
    }
  },
  created() {

  },
  mounted() {
    const s = JSON.parse(this.$route.query.searchTeacherForm)
    this.searchTeacherForm = { ...s, page: this.currentPage, size: this.limit, classId: this.$route.query.classId }
    this.getTeacherTimeTab()
  },
  beforeDestroy() {
    this.$bus.$off('choiceTeacherData')
  },
  methods: {
    // 整理数据
    disposalData() {
      this.title.push('')
      const newTeacherTimeTab = this.teacherTimeTab.map((item, index) => {
        const arr = []
        this.title.push({
          Ava: item.Ava,
          date: item.date,
          teacherId: item.teacher_id
        })
        for (const key in item.timeTab) {
          arr.push(item.timeTab[key])
        }
        return arr
      })
      this.resulteacherTab = newTeacherTimeTab[0].map((col, index) => {
        return [this.timeForm[index], ...newTeacherTimeTab.map((row) => {
          return row[index]
        })]
      })
    },
    // 发送请求获得数据
    async getTeacherTimeTab() {
      const { inputVal, area, round, teachExp, classTool, classTime, dataVal, page, size, classId } = this.searchTeacherForm
      const { data } = await this.$API.classAPI.choiceTeacher({
        teacher: inputVal,
        area,
        range: round,
        experience: teachExp,
        tools: classTool,
        time: classTime,
        start_time: dataVal[0] || '',
        last_time: dataVal[1] || '',
        class_id: classId || 1,
        page,
        size
      })
      data.rows.forEach(item => {
        item.date = this.$dayjs(item.data).format('YYYY-MM-DD')
      })
      this.resulteacherTab = []
      this.title = []
      this.teacherTimeTab = data.rows
      this.total = data.count
      this.disposalData()
    },
    handleSizeChange(limit) {
      this.limit = limit
      this.searchTeacherForm.size = limit
      this.getTeacherTimeTab()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.searchTeacherForm.page = page
      this.getTeacherTimeTab()
    },
    async handleBookClass(index, item) {
      this.$confirm(`确定要购买次课程吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        lockScroll: 'true',
        type: 'warning'
      }).then(async() => {
        const timeNum = this.timeForm[index].slice(0, this.timeForm[index].indexOf('-')) + ':00'
        const concatTime = item.date + ' ' + timeNum
        const result = await this.$API.classAPI.buyClass(item.teacherId, concatTime)
        if (result.code === 200) {
          this.getTeacherTimeTab()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消购买'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.findTeacher {
}
.findTeacher-header {
}
.findTeacher-center {
  margin: 80px;
  img {
    width: 100px;
    height: 100px;
  }
  .line_box{
    width: 100%;
    height: 130px;
    font-size: 20px;
    color: #000;
    display: flex;
    align-items: center;
    overflow: hidden;
    .tit3{
     align-self: flex-end;
    }
    .line1{
      width: 326px;
      height: 1px;
      border-bottom:1px solid #999 ;
      transform: rotate(50deg);
    }
  }
  .line_avaAndDate{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img{
      display: block;
      margin: 0 auto;
      width: 200px;
      height: 150px;
    }
  &-text{
    font-size: 18px;
    margin-top: 20px;
    margin-bottom:10px;
  }
  }
}
.findTeacher-footer{
  text-align: center;
}
</style>
